<template>
    <div>
        <div style="margin: 10px 0;padding-bottom: 50px">
            <el-row :gutter="10">
                <el-col :span="4" v-for="item in listData" :key="item.id">
                    <div>
                        <el-card style="margin-bottom: 10px;cursor: pointer">
                            <div>
                                <div>
                                    <img :src="item.img" alt="" style="width: 100px; height: 100px;display:block;margin:0 auto">
                                </div>
                                <div style="flex: 1">
                                    <div style="font-size: 17px; text-align: center;margin-top: 10px;">{{ item.name }}</div>
                                    <div style=" line-height: 30px">{{ item.content}}</div>
                                    <div >
                                        <el-button>已领养</el-button>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </div>
                </el-col>

            </el-row>
            <div style="margin-top: 20px">
                <el-pagination
                    @current-change="currentChange"
                    @size-change="sizeChange"
                    :page-size="pageInfo.pageSize"
                    :current-page="pageInfo.currentPage"
                    background
                    layout="sizes, prev, pager, next"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import utils from "@/utils/utils";

export default {
    name: "FrontHome",
    data() {
        return {
            //总条数
            total: 0,
            //分页详情
            pageInfo: {
                //当前页
                pageNum: 1,
                //分页大小
                pageSize: 10
            },
            listData: [],
            linkList:[],
            userInfo: utils.getUserInfo(),

        }
    },
    created() {
        this.getPageList()
    },
    methods: {
        //获取分页数据
        getPageList() {
            this.pageInfo.isPet = "已领养"
            this.request.get("/animal/page", {
                params: this.pageInfo
            }).then(res => {
                this.listData = res.data.list
                this.total = res.data.total
            })
        },
        //选择分页
        currentChange(e) {
            this.pageInfo.pageNum = e
            this.getPageList()
        },
        //改变分页数量
        sizeChange(e) {
            this.pageInfo.pageSize = e
            this.getPageList()
        },

    }
}
</script>